import React, { Component } from 'react';
import { Layout, Menu ,Button, Modal, message} from 'antd';
import Admin from '@/router/Admin'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons';
import '@/assets/css/dashboard.css'
import { Link } from 'react-router-dom';
import url from '@/config/url';
import axios from '@/http/http'
import Cookies from 'js-cookie'
const { confirm } = Modal;
const { Header, Sider, Content } = Layout;
// 获取保存的侧边导航
const navList = JSON.parse(localStorage.getItem('acl'))
// console.log(navList);
// 为左侧菜单每一项的菜单对象
function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}

const items = [
/*   getItem('Option 1', '1', <PieChartOutlined />),
  getItem('Option 2', '2', <DesktopOutlined />),
  getItem('User', 'sub1', <UserOutlined />, [
    getItem('Tom', '3'),
    getItem('Bill', '4'),
    getItem('Alex', '5'),
  ]),
  getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
  getItem('Files', '9', <FileOutlined />), */
];

// 左侧菜单push菜单对象
if(navList){
    navList.map(item=>{
        if(item.children.length != 0){
                items.push(getItem(
                item.auth_name, 
                item.auth_path, 
                <UserOutlined />,
                item.children.map(item1=>{
                    if(item1.is_nav === 1){
                        return  getItem(<Link to={item1.auth_path}>{item1.auth_name}</Link>, item1.auth_path,)  // <UploadOutlined/>
                    }
                })
            ))
        }else{
            items.push(getItem(
                item.auth_name, 
                item.auth_path, 
                <UserOutlined />,
            ))}
    })
}
class Dashboard extends Component {
    constructor(props) {
        super(props)
        axios.get(url.precheck).then(res=>{
            // console.log(res)
            if (res.data.errNo == 0) {
                // 说明是正常登录过的
                this.state.setState({
                    islogined:true
                })
            }else{
                // 不是正常登录的
                this.setState({
                    islogined:false
                })
                message.error('请您先登录',1,()=>{
                    this.props.history.push('/login')
                })
            }
        }).catch(e=>{})
    }
    state = {
        collapsed:false,    // 是否折叠
        username:'',    //首页头部个人信息
        role:'',    //首页头部个人信息
        islogined:true,    // 用来判断是否渲染Layout组件
    }
    // 折叠点击事件
    setCollapsed = () =>{
        this.setState({
            collapsed:!this.state.collapsed
        })
    }
    // 默认选中项 
    defaultSelectedKeys = [this.props.location.pathname]
    // 初始展开的 SubMenu 菜单项 key 数组
    //想让二级菜单打开，应该设置他的一级菜单对应的key
    defaultOpenKeys = [this.props.location.pathname.substr(0,this.props.location.pathname.lastIndexOf('/'))]
    render() {
        const {collapsed} = this.state
        return (
            <>
                 {
                    this.state.islogined?
                        <Layout>
                            <Sider trigger={null} collapsible collapsed={collapsed}>
                                <div className="logo" />
                                <Menu
                                theme="dark"
                                mode="inline"
                                // 初始选中的菜单项 key 数组
                                defaultSelectedKeys={this.defaultSelectedKeys}
                                defaultOpenKeys={this.defaultOpenKeys}
                                items={items}
                                />
                            </Sider>
                            <Layout className="site-layout">
                                <Header
                                className="site-layout-background"
                                style={{
                                    padding: 0,
                                }}
                                >
                                {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                    className: 'trigger',
                                    onClick:() => this.setCollapsed()
                                })}
                                <span>Hello!&nbsp;&nbsp;{this.state.username}/{this.state.role}</span>
                                <span className='myinfo' onClick={this.loginOut}>注销登录</span>
                                </Header>
                                <Content
                                className="site-layout-background"
                                style={{
                                    margin: '24px 16px',
                                    padding: 24,
                                    minHeight: 280,
                                }}
                                >
                                    {/* 二级路由坑 */}
                                    <Admin></Admin>
                                </Content>
                            </Layout>
                        </Layout>
                    :''
                  } 
             </>
            
        );
    }
    componentDidMount(){
        axios.get(url.getmyinfo).then((res) =>{
            // console.log(res)
            this.setState({
                username:res.data.accountInfo.username,
                role:res.data.accountInfo.role
            })
        }).catch(e=>{})
    }
    // 注销登录
    loginOut = () => {
        confirm({
            title: '提示',
            icon: <ExclamationCircleOutlined />,
            content: '确认要退出当前账号吗',
            onOk:()=> {
                // 删除jwt和acl
                Cookies.remove('jwt')
                localStorage.removeItem('acl')
                message.success('退出成功',.5,()=>{
                    this.props.history.push('/login')
                })
            },
            onCancel() {
            //   console.log('Cancel');
            },
        });
    }
}

export default Dashboard;




